<html>
<head>
<!-- Load Google Ajax framework. -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<!-- Load Ajile framework. -->
  <script type="text/javascript" src="http://wattdepot-gdata.googlecode.com/svn/trunk/javascript/ajile/com.iskitz.ajile.js?mvcoff,mvcshareoff,refresh"></script>

<!-- Load the PieChart code. -->
<script type="text/javascript" src="org.wattdepot.gdata.PieChart.js"></script>

<!-- Now run page-specific code. -->
<script type="text/javascript">

// Load the Visualization API and the bar chart package.
google.load("visualization", "1", {packages:['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(onVisualizationLoaded);

// Once visualization API is loaded, retrieve data and set callbacks to run once retrieved.
function onVisualizationLoaded() {
  // Get all of the dorm data from the spreadsheet.
  var dormDataURL = 'http://spreadsheets.google.com/tq?key=0Av0U6TKHfzXYdG1vUnduR0RVTktyR1ZtNjAtSE9Qbmc&range=A3:F21&gid=0';
  var dormDataQuery = new google.visualization.Query(dormDataURL);
  // Update the pie chart once an hour.
  dormDataQuery.setRefreshInterval(3600);
  
  // Set a callback to run when the dorm data has been retrieved.
  dormDataQuery.send(onDormDataAvailable);
}

  function onDormDataAvailable(response) {
    // Process errors, if any.
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
    
    // Get the dorm data table.
    //var data = response.getDataTable();
    var piechart = new org.wattdepot.gdata.PieChart();
    var data = piechart.getDataTable(response);
    // Create the view that is just the total dorm energy data.
    var pieView = new google.visualization.DataView(data);
    pieView.setColumns([0,4]);
    pieView.setRows([5,11,17]);
    var pieChart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
    pieChart.draw(pieView, {width: 300, height: 300, title: 'Energy Usage since 5/25/2010'});
  }

    </script>
  </head>

  <body>
    <div id="pie_chart_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  </body>
</html>

